<template>
	<view class="bigBox">
		<view class="userTx">
			<!-- <image :src="src" style="width: 120rpx;height: 120rpx;border-radius: 60rpx;"></image> -->
			<u-avatar :src="src" shape="circle" :size='"120rpx"'></u-avatar>
			<view class="xx">
				<text class="name">名字</text>
				<text class="number">123456789</text>
			</view>
			<view class="zl" @click="goMydata">
				我的资料
				<u-icon name='arrow-right'></u-icon>
			</view>
		</view>
		<view class="myZy">
			<view class="like">
				<template v-for="item in myList">
					<view class="Box">
						<text class="number">{{item.number}}</text>
						<text class="text">{{item.name}}</text>
					</view>
				</template>
			</view>
			<view class="open">进入我的主页</view>
		</view>
		<view class="shopOrder">
			<view class="shopBox">
				<template v-for="(item,index) in shopList">
					<view class="Box" @click="goOrder(index)">
						<image :src="item.url" class="shopIcon"></image>
						<text class="text">{{item.name}}</text>
					</view>
				</template>
			</view>
			<view class="shopBox" style="height: 40rpx;margin-top: 0;">
				<template v-for="(item,i) in 5">
					<view :class="i==index?'sj':'nosj'"></view>
				</template>
			</view>
			<view class="nowXx">
				<image class="image" src="https://cdn.uviewui.com/uview/album/7.jpg"></image>
				<view class="textBox">
					<text class="static">正在打包，准备发货中</text>
					<text class="text">您的订单已进入第三方卖家仓库，准备出库</text>
				</view>
			</view>
		</view>
		<u-swiper style='width: 670rpx;margin-top: 20rpx;' :list="list3" indicator indicatorMode="line" circular></u-swiper>
		<view class="assets">
			<view class="box">
				<view class="text">我的资产</view>
				<u-icon :name='iconName' size='18' @click='moneyYc'></u-icon>
				<!-- eye-off -->	
			</view>
			<text class="money">
				{{money}} 武币
			</text>
		</view>
		<view class="setting">
			<template v-for="(item,index) in settingList">
				<view class="settingSonBox" @click="goSetting(index)">
					<image :src="item.url" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</template>
		</view>
		<view class="technology">
			武品汇科技技术支持
		</view>
		<tabar :index="value1"></tabar>
	</view>
</template>

<script>
	import tabar from '@/pages/tabar/tabar.vue'
	export default {
		components: {
			tabar
		},
		data() {
			return {
				settingList:[{
					name:'收藏',
					url:'../../static/icon/collection.png'
				},{
					name:'粉丝团',
					url:'../../static/icon/fs.png'
				},{
					name:'动态管理',
					url:'../../static/icon/dt.png'
				},{
					name:'设置',
					url:'../../static/icon/setting.png'
				}],
				src: 'https://cdn.uviewui.com/uview/album/7.jpg',
				value1: 4,
				index: 1,
				iconName:'eye',
				money:18000,
				money1:18000,
				list3:[
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				shopList: [{
					name: '待付款',
					url: '../../static/icon/fk.png'
				}, {
					name: '待发货',
					url: '../../static/icon/fh.png'
				}, {
					name: '待收货',
					url: '../../static/icon/sh.png'
				}, {
					name: '待评价',
					url: '../../static/icon/pj.png'
				}, {
					name: '全部',
					url: '../../static/icon/all.png'
				}],
				myList: [{
					name: '动态',
					number: 2082
				}, {
					name: '粉丝',
					number: 2082
				}, {
					name: '关注',
					number: 2082
				}, {
					name: '喜欢',
					number: 2082
				}, ]
			}
		},
		methods: {
			goMydata(){
				uni.navigateTo({
					url:'/pages/my/myData'
				})
			},
			goSetting(index){
				console.log(index)
			},
			moneyYc(){
				if(this.iconName=='eye'){
					this.iconName='eye-off'
					this.money='*******'
				}else{
					this.iconName='eye'
					this.money=this.money1
				}
				
			},
			goOrder(index) {
				console.log(index)
				uni.navigateTo({
					url:`/pages/shop/order?static=${index}`,
				})
			}
		}
	}
</script>

<style>
	.bigBox {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
		padding-bottom: 60rpx;
	}
	.swiper{
		width: 670rpx;
		height: 228rpx;
	}
	.technology{
		margin-top: 20rpx;
		color: rgba(190, 199, 209, 100);
		font-size: 24rpx;
	}
</style>
<style lang="less">
	.userTx {
		width: 670rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.xx {
			width: 350rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.name {
				color: rgba(33, 51, 255, 100);
				font-size: 32rpx;
			}

			.number {
				margin-top: 20rpx;
				color: rgba(190, 199, 209, 100);
				font-size: 28rpx;
			}
		}

		.zl {
			display: flex;
			color: #BEC7D1;
		}
	}

	.myZy {
		width: 670rpx;
		height: 240rpx;
		background-color: #0C1332;
		border-radius: 20rpx;
		overflow: hidden;
		color: white;

		.like {
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.Box {
				display: flex;
				flex-direction: column;
				align-items: center;

				.number {
					color: rgba(255, 255, 255, 100);
					font-size: 36rpx;
				}

				.text {
					color: rgba(190, 199, 209, 100);
					font-size: 24rpx;
				}
			}
		}

		.open {
			height: 80rpx;
			background-color: #3BD1C3;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.shopOrder {
		margin-top: 20rpx;
		width: 670rpx;
		height: 340rpx;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		align-items: center;

		.shopBox {
			margin-top: 10rpx;
			width: 590rpx;
			height: 160rpx;
			display: flex;
			justify-content: space-between;

			.nosj,
			.sj {
				width: 100rpx;
				height: 40rpx;

			}

			.sj {
				// background-color: #fff;
				width: 0;
				height: 0;
				border-left: 50rpx solid transparent;
				border-right: 50rpx solid transparent;
				border-bottom: 40rpx solid #fff;
			}

			.Box {
				display: flex;
				flex-direction: column;
				align-items: center;

				.shopIcon {
					width: 100rpx;
					height: 100rpx;
				}

				.text {
					color: rgba(190, 199, 209, 100);
					font-size: 28rpx;
				}
			}
		}

		.nowXx {
			width: 590rpx;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}

			.textBox {
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.static {
					font-weight: 700;
					color: rgba(12, 19, 50, 100);
					font-size: 24rpx;
				}

				.text {
					color: rgba(190, 199, 209, 100);
					font-size: 24rpx;
				}
			}
		}
	}
	.assets{
		margin-top: 20rpx;
		width: 670rpx;
		height: 160rpx;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		.box{
			width: 630rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text{
				font-weight: 700;
				font-family: '黑体';
				color: rgba(0, 4, 17, 100);
				font-size: 28rpx;
			}
			.icon{
				
				width: 18px;
				height: 18px;
			}
		}
		.money{
			font-weight: 700;
			width: 630rpx;
			color: rgba(255, 78, 95, 100);
			font-size: 30rpx;
		}
	}
	.setting{
		margin-top: 20rpx;
		width: 670rpx;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.settingSonBox{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 140rpx;
			height: 140rpx;
			background-color: #F8F8F8;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			text{
				margin-top: 24rpx;
				font-weight: 700;
				color: rgba(0, 4, 17, 100);
				font-size: 28rpx;
			}
		}
	}
	
</style>
